﻿@page "/analysis/core"
@inherits TscComponentBase

<MSticky ZIndex="7" OffsetTop="52" Context="stickyContext">
    <MRow Dense>
        <MCol Cols="12" Class="d-flex align-center justify-center">
            <MMenu @bind-Value="_dateRangeMenu" CloseOnContentClick="false" OffsetY>
                <ActivatorContent>
                    <MButton @attributes="@context.Attrs" Class="surface" Style="z-index: 7" Plain Right >
                        <MTooltip Top>
                            <ActivatorContent Context="tContext">
                                <MIcon @attributes="@tContext.Attrs" Small Class="mr-1">mdi-help-circle-outline</MIcon>
                            </ActivatorContent>
                            <ChildContent>
                                查询“日访问趋势”和“新增用户”数据的日期范围
                            </ChildContent>
                        </MTooltip>

                        @string.Join(" - ", _dateRange.Select(d => d.ToString(CultureInfo.CurrentUICulture)))
                    </MButton>
                </ActivatorContent>
                <ChildContent>
                    <MDatePicker @bind-Value="@_dateRange" Range
                                 NoTitle
                                 @bind-Value:after="OnDateRangeUpdate">
                    </MDatePicker>
                </ChildContent>
            </MMenu>
        </MCol>
    </MRow>
</MSticky>
<MRow>
    <MCol Cols="12" Lg="6">
        <MCard Class="echarts-card"
               Title="累计用户-用户注册"
               MinHeight="156">
            @if (_mainData is not null)
            {
                <MCardText Class="text-center">
                    <div class="text-h3 font-weight-bold">@_mainData.UserSign.ToString("N0")</div>
                    <div>@_mainData.DateKey[..10]</div>
                    <div class="subtitle-2">
                        <span>较昨日（@_mainData.ToYesterday）</span>
                        <span class="green--text">
                            <MIcon Style="color: inherit;" Small>mdi-arrow-up</MIcon>
                            <span>@(_mainData.Rate.ToString("P"))</span>
                        </span>
                    </div>
                </MCardText>
            }
        </MCard>
    </MCol>
    <MCol Cols="12" Lg="6">
        <MCard Class="echarts-card"
               MinHeight="156">
            <MCardTitle>
                核心数据-用户
                <MTooltip Top>
                    <ActivatorContent>
                        <span style="border-bottom: dashed" @attributes="@context.Attrs">流失率</span>
                    </ActivatorContent>
                    <ChildContent>
                        示例：7月份流失率=1-(8月份用户数(7月份访问)÷7月份访问用户数)×100%
                    </ChildContent>
                </MTooltip>
                (较一个月前)
            </MCardTitle>
            <MCardText>
                @if (_mainData is not null)
                {
                    <div class="text-center">
                        <div class="text-h3 font-weight-bold">@_mainData.FinalUv.ToString("N0")</div>
                        <div>@_mainData.DateKey[..10]</div>
                        <div class="subtitle-2">
                            <span>较一个月前（@_mainData.StartUv）</span>
                            <span class="red--text">
                                <MIcon Style="color: inherit;" Small>mdi-arrow-down</MIcon>
                                <span>@(_mainData.AliveRate.ToString("P"))</span>
                            </span>
                        </div>
                    </div>
                }
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="核心数据-忠诚用户">
            <MCardText>
                <MECharts Option="@_permonOption"
                          MinHeight="260"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="累计用户趋势">
            <MCardText>
                <MECharts Option="@_monVisitOption"
                          MinHeight="260"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="日访问趋势">
            <MCardText>
                <MECharts Option="@_monUserOption"
                          MinHeight="360"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="新增用户">
            <MCardText>
                <MECharts Option="@_monUserVisitOption"
                          MinHeight="360"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="用户流失率-近1月">
            <MCardText>
                <MECharts Option="@_userLoseByDayOption"
                          IncludeFunctionsInOption
                          MinHeight="360"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="用户流失率-按周">
            <MCardText>
                <MECharts Option="@_userLoseByWeekOption"
                          IncludeFunctionsInOption
                          MinHeight="360"/>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Cols="12">
        <MCard Class="echarts-card"
               Title="用户流失率-按月">
            <MCardText>
                <MECharts Option="@_userLoseByMonOption"
                          IncludeFunctionsInOption
                          MinHeight="360"/>
            </MCardText>
        </MCard>
    </MCol>
</MRow>
